<template>
    <div style="width: 30%;margin: 30px">
        <el-form ref="form" :rules="rules" :model="revisePassword" label-width="150px">
            <el-form-item label="输入原密码" prop="oldPassword">
                <el-input size="small" placeholder="输入原密码" show-password v-model="revisePassword.oldPassword"></el-input>
            </el-form-item>
            <el-form-item prop="newPassword" label="输入新密码">
                <el-input size="small" placeholder="输入新密码" show-password v-model="revisePassword.newPassword"></el-input>
            </el-form-item>
            <el-form-item prop="repeatPassword" label="再次输入新密码">
                <el-input size="small" placeholder="再次输入新密码" show-password v-model="revisePassword.repeatPassword"></el-input>
            </el-form-item>
        </el-form>
        <el-button size="small" @click="changePassword" style="margin-left: 45%;width: 100px" type="primary">确定</el-button>
    </div>
</template>

<script>


import {logout, updatePwd} from "@/api/login";

export default {
    name: 'index',
    data(){
        var checkPhone = (rule, value, callback) => {

            if (this.revisePassword.newPassword != value) {
                return callback(new Error('密码不相符，请重新输入'));
            } else {
                callback();
            }
        }
        return{
            rules: {
                oldPassword: [
                    { required: true, message: '请输入原密码', trigger: 'blur'  },
                    { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
                ],
                newPassword: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                    {
                        validator: (rule, value, callback) => {
                            // 判断密码是否符合要求
                            const numReg = /\d+/; // 匹配数字
                            const letterReg = /[a-zA-Z]+/; // 匹配字母
                            const specialCharReg = /[^a-zA-Z0-9]+/; // 匹配特殊字符
                            const isNum = numReg.test(value); // 是否是纯数字
                            const isLetter = letterReg.test(value); // 是否是纯字母
                            const isSpecialChar = specialCharReg.test(value); // 是否包含特殊字符
                            if (isNum && !isLetter && !isSpecialChar) {
                                callback(new Error('密码不能为纯数字'));
                            } else if (!isNum && isLetter && !isSpecialChar) {
                                callback(new Error('密码不能为纯字母'));
                            } else if (!isNum && !isLetter && isSpecialChar) {
                                callback(new Error('密码不能只包含特殊字符'));
                            } else if (
                                (isNum && isLetter) ||
                                (isNum && isSpecialChar) ||
                                (isLetter && isSpecialChar)
                            ) {
                                callback();
                            } else {
                                callback(new Error('密码必须包含数字、字母或特殊字符中的至少两种类型'));
                            }
                        },
                        trigger: 'blur'
                    },
                    {min: 8, message: '密码长度不能少于8位', trigger: 'blur'}
                ],
                repeatPassword: [
                    { required: true, validator: checkPhone, trigger: 'blur' }
                ]
            },
            revisePassword:{
                oldPassword:'',
                newPassword:'',
                repeatPassword:''
            },
        }
    },
    methods:{
        changePassword(){
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    delete this.revisePassword["repeatPassword"]
                    let password = {
                        newPwd: this.revisePassword.newPassword,
                        oldPwd: this.revisePassword.oldPassword
                    }
                    let res =await updatePwd(password)
                    if(res.data.code==200){
                        this.$message.success("成功！！")
                        // 删除相关的
                        localStorage.removeItem("token");
                        localStorage.removeItem("menuList");
                        localStorage.removeItem("userinfo");
                        this.$router.push("/")
                        location.reload()
                    }else {
                        this.$message.error(res.data.msg)
                    }
                } else {
                    return false;
                }
            });
        }
    },
    mounted() {
        console.log()
    }
}
</script>

<style scoped>
el-form-item{

}
</style>
